#app.theme-dark {
  background: $dark-bg;
  color: $light-text-color;

  * {
    border-color: $dark-border !important;

    &::-webkit-scrollbar {
      background: #4C4C4C;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background:#323131;
    }
  }

  ul.menu {
    background: transparent !important;

    li:hover,
    li.is-active {
      background: $dark-bg-active !important;
    }
  }

  pre {
    background: $dark-bg-pre !important;
  }

  .CodeMirror {
    background: $dark-bg-pre !important;
  }

  .CodeMirror-gutters {
    background: $dark-bg-active !important;
  }
  
  .logger {
    background: $dark-bg-pre !important;

    li:hover {
      background: $dark-bg-active !important;
    }
  }

  /deep/ .el-dialog {
    background: $dark-bg !important;

    .el-dialog__header,
    .el-dialog__body {
      color: #fff !important;
      > * {
        color: #fff !important;
      }
    }
  }

  /deep/ .el-breadcrumb {
    .el-breadcrumb__inner,
    .el-breadcrumb__separator {
      color: #fff !important;
    }
  }

  /deep/ .el-pagination {
    background: transparent !important;

    > * {
      background: transparent !important;
    }
  }

  /deep/ .el-tabs__item {
    color: #fff !important;
  }

  /deep/ .el-tabs__item.is-active {
    color: #409EFF !important;
  }

  /deep/ .el-table, .el-table th, .el-table tr, 
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: $dark-bg-pre !important;

    &:hover {
      background: $dark-bg-active !important;
    }
  }
}
